<!--
 * @Author: boyyang
 * @Date: 2022-01-05 16:04:41
 * @LastEditTime: 2022-02-19 22:17:14
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\message\content.vue
-->

<template>
    <div
        :class="['message-box', props.content?.type]"
        v-if="isShow"
        @mouseenter="curEnter"
        @mouseleave="curLeave"
    >
        <i :class="['iconfont', 'icon-before', 'icon-' + props.content?.type]"></i>
        <span class="message">{{ props.content?.msg }}</span>
        <i class="iconfont icon-qingchu3 close" v-show="props.content?.isClose" @click="close"></i>
    </div>
</template>

<script lang="ts" setup>
import { IMessageContent } from './messageType'

interface IContent {
    content?: IMessageContent
}

let props = withDefaults(defineProps<IContent>(), {})

const isShow = ref<boolean>(true)
const timer = ref<any>(null)
const time = props.content?.duration

onMounted(() => {
    if (time) {
        hide(time)
    } else {
        hide(5000)
    }
})

const hide = (time: number | string) => {
    timer.value = setTimeout(() => {
        isShow.value = false
        clearInterval(timer.value)
    }, Number(time))
}


// 当鼠标移动到该提示消息时清除定时器
const curEnter = () => {
    clearTimeout(timer.value)
}

// 开启定时器
const curLeave = () => {
    if (time) {
        hide(time)
    } else {
        hide(3000)
    }
}

// 点击关闭
const close = () => {
    isShow.value = false
}

</script>

<style scoped lang="scss">
.message-box {
    min-width: 120px;
    padding: 6px 15px 6px 30px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    animation: show 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: whitesmoke;
    position: relative;
    font-size: 15px;

    .message {
        margin-left: 5px;
    }
}

.info {
    background-color: rgb(156, 154, 154);
}

.success {
    background-color: rgb(37, 180, 61);
}

.error {
    background-color: rgb(219, 42, 42);
}

.warning {
    background-color: rgb(207, 127, 21);
}

.close {
    padding-left: 20px;
}

.icon-before {
    margin-right: 5px;
    position: absolute;
    left: 10px;
    color: whitesmoke;
}

@keyframes show {
    0% {
        opacity: 0;
        transform: translateX(-45vw);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
</style>
